{%- stylesheet -%}
  .block_default_product_recommend .swiper {
    overflow: hidden;
    flex: 1;
    text-align: center;
  }
  .block_default_product_recommend .swiper .swiper-slide .product_pic {
    margin-bottom: 26px;
  }
  .block_default_product_recommend .swiper-button-disabled {
    cursor: no-drop !important;
  }
  .block_default_product_recommend .swiper .swiper-slide .product_pic .product_img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
  }
  .block_default_product_recommend .swiper-button-disabled svg path{
    fill: #dddddd;
  }
  .block_default_product_recommend .content {
    display: flex;
  }
  .block_default_product_recommend .content .prev_btn,
  .block_default_product_recommend .content .next_btn {
    display: flex;
    align-items: center;
  }
  .block_default_product_recommend .content .prev_btn span,
  .block_default_product_recommend .content .next_btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .block_default_product_recommend .content .prev_btn svg,
  .block_default_product_recommend .content .next_btn svg {
    width: 25px;
    outline: none;
  }
  .block_default_product_recommend .content .next_btn svg {
    transform: rotate(-180deg);
  }
  .block_default_product_recommend .soldout {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 50px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 14px;
  }
  @media screen and (max-width: 767px) {
    .block_default_product_recommend .content {
      gap: 10px;
    }
  }
{%- endstylesheet -%}

{%- assign recommend_product_id = product.id | default: section.page_id -%}

{% assign data = section.settings %}
{% capture container %}
    {%- if data.is_fill -%}
        full_container_wrapper
    {%- else -%}
        container_wrapper
    {%- endif -%}
{% endcapture %}
{% assign blockId = block_id | default: section.block_id %}

{%- assign recommend_products = [] -%}

{%- capture rules -%}
  {%- if data.range_config.recommend_range == 'all' -%}
    {{ data.range_config.all_rules }}
  {%- endif -%}
  {%- if data.range_config.recommend_range == 'current' -%}
    {{ data.range_config.current_rules }}
  {%- endif -%}
{%- endcapture -%}

{%- if data.range_config.recommend_range == 'single' and data.range_config.collection.id != '' -%}
  {% get_products collection_id={data.range_config.collection.id} limit={ data.product_number } %}
  {% get_collection collections_id={data.range_config.collection.id} %}
  {% assign collection = collection %}
  {%- assign recommend_products = products -%}
{%- endif -%}
{%- if data.range_config.recommend_range == 'all' or data.range_config.recommend_range == 'current' -%}
  {% get_recommend_products recommend_range={data.range_config.recommend_range} recommend_rule={rules} limit={data.product_number} product_id={recommend_product_id} %}
  {%- assign recommend_products = products -%}
{%- endif -%}




<div class="block_default_product_recommend">
  <div class="{{ container }}">
    {% include 'block_title', title: data.block_title, detail: data.block_detail %}

    <div class="content">
      <div class="prev_btn" id="prev-{{ blockId }}">
        <span>
          <svg
            t="1635160440262"
            class="icon prev"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1353"
            width="24"
            height="24"
            tabIndex="0"
            role="button"
            aria-label="Previous slide"
            aria-disabled="false"
          >
            <path d="M511.609097 961.619254" p-id="1354"></path><path d="M360.749204 511.010463 360.749204 511.010463l382.080022-382.074905c14.762215-14.788821 14.762215-38.777165 0-53.585429-14.812357-14.788821-38.799678-14.788821-53.607942 0L283.415908 481.201553c-1.107217 0.867764-2.190899 1.824555-3.206018 2.843768-14.788821 14.808264-14.788821 38.795585 0 53.585429l408.226518 408.230612c14.808264 14.807241 38.795585 14.807241 53.584406 0 14.785751-14.767332 14.785751-38.754652 0-53.562916L360.749204 511.010463 360.749204 511.010463zM360.749204 511.010463" p-id="1355"></path>
          </svg>
        </span>
      </div>
      <div class="swiper" id="swiper-{{ blockId }}">
        <div class="swiper-wrapper">
          {%- if recommend_products.size > 0 and recommend_products -%}
            {% for product in recommend_products %}
              <div class="swiper-slide">
                {% include 'collection_product', product: product, collection_handle: collection.handle %}
              </div>
            {% endfor %}
          {%- endif -%}
          {%- if data.range_config.recommend_range == 'single' and data.range_config.collection.id == '' -%}
            {%- for i in (1..4) -%}
              <div class="swiper-slide">
                {% include 'collection_product',product: '' %}
              </div>
            {%- endfor -%}
          {%- endif -%}
        </div>
      </div>
      <div class="next_btn" id="next-{{ blockId }}">
        <span>
          <svg
            t="1635160440262"
            class="icon next"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1353"
            width="24"
            height="24"
            tabIndex="0"
            role="button"
            aria-label="Next slide"
            aria-disabled="false"
          >
            <path d="M511.609097 961.619254" p-id="1354"></path><path d="M360.749204 511.010463 360.749204 511.010463l382.080022-382.074905c14.762215-14.788821 14.762215-38.777165 0-53.585429-14.812357-14.788821-38.799678-14.788821-53.607942 0L283.415908 481.201553c-1.107217 0.867764-2.190899 1.824555-3.206018 2.843768-14.788821 14.808264-14.788821 38.795585 0 53.585429l408.226518 408.230612c14.808264 14.807241 38.795585 14.807241 53.584406 0 14.785751-14.767332 14.785751-38.754652 0-53.562916L360.749204 511.010463 360.749204 511.010463zM360.749204 511.010463" p-id="1355"></path>
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

<script>
  (function(){
    let isMobile = moi.isMobile()
    let options = {}
    let productsSize = {{ recommend_products.size | default: 0 }}
    let showBtn = isMobile ? Number('{{ data.yd_number }}') < productsSize : Number('{{ data.pc_number }}') < productsSize;
      if(showBtn) {
        options.navigation = {
          nextEl: '#next-{{ blockId }} span',
          prevEl: '#prev-{{ blockId }} span',
        }
      }else {
        $('#next-{{ blockId }}').hide()
        $('#prev-{{ blockId }}').hide()
      }
    let swiper = new Swiper(`#swiper-{{blockId}}`, {
      slidesPerView: isMobile ? {{ data.yd_number }} : {{ data.pc_number }},
      spaceBetween: isMobile ? 15 : 30,
      autoHeight: true,
      ...options
    })
    $(`#swiper-{{blockId}} .swiper-slide`).each(function () {
      const element = this;

      const resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
          swiper.update();
        }
      });
      resizeObserver.observe(element);
    });
  })()
</script>

{% schema %}
{
  "class": "block_default_product_recommend",
  "is_global": false,
  "icon": "icon-Recommendation",
  "name": {
    "zh_CN": "商品详情推荐",
    "en_US": "Product Recommend"
  },
  "routes": ["product/detail"],
  "max_blocks": "",
  "blocks": [],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满",
        "en_US": "Spread the width"
      },
      "id": "is_fill",
      "default": false
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题"
      },
      "default": "You May Also Like",
      "id": "block_title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "描述"
      },
      "id": "block_detail",
      "default": ""
    },
    {
      "type": "card_slider",
      "id": "pc_number",
      "max": "5",
      "min": "3",
      "label": {
        "zh_CN": "PC每排数量",
        "en_US": "PC number per row"
      },
      "default": "4"
    },
    {
      "type": "card_slider",
      "id": "yd_number",
      "max": "2",
      "min": "1",
      "label": {
        "zh_CN": "移动端每排数量",
        "en_US": "Number of mobile terminals per row"
      },
      "default": "2"
    },
    {
      "type": "card_select_show",
      "label": {
        "zh_CN": "推荐范围",
        "en_US": "Recommendation range"
      },
      "placeholder": {
        "zh_CN": "推荐范围",
        "en_US": "Recommendation range"
      },
      "default": {
        "recommend_range": "single",
        "collection": {
          "id": "",
          "title": ""
        },
        "all_rules": "late_sale",
        "current_rules": "late_up"
      },
      "id": "range_config",
      "default_setting": {
        "type": "card_select",
        "label": {
          "zh_CN": "推荐范围",
          "en_US": "Recommendation range"
        },
        "info": {
          "zh_CN": "",
          "en_US": ""
        },
        "id": "recommend_range",
        "option": [
          {
            "label": {
              "zh_CN": "单个专辑",
              "en_US": "Single album"
            },
            "value": "single"
          },
          {
            "label": {
              "zh_CN": "全部商品",
              "en_US": "All products"
            },
            "value": "all"
          },
          {
            "label": {
              "zh_CN": "当前专辑",
              "en_US": "Current album"
            },
            "value": "current"
          }
        ],
        "default": "single"
      },
      "slot_settings": [
        {
          "value": "single",
          "settings": [
            {
              "type": "card_collection",
              "label": {
                "zh_CN": "选择专辑"
              },
              "default": {
                "id": "",
                "title": ""
              },
              "id": "collection"
            }
          ]
        },
        {
          "value": "all",
          "settings": [
            {
              "type": "card_select",
              "label": {
                "zh_CN": "推荐规则",
                "en_US": "Recommendation rules"
              },
              "default": "late_sale",
              "id": "all_rules",
              "option": [
                {
                  "label": {
                    "zh_CN": "最近卖出(按最新卖出降序)",
                    "en_US": "Recently sold (descending order by latest sale)"
                  },
                  "value": "late_sale"
                },
                {
                  "label": {
                    "zh_CN": "最新上架(按最新创建时间降序)",
                    "en_US": "Latest release (in descending order of last created)"
                  },
                  "value": "late_up"
                },
                {
                  "label": {
                    "zh_CN": "最多浏览(按最多浏览降序)",
                    "en_US": "Most viewed (in descending order of most viewed)"
                  },
                  "value": "max_visit"
                },
                {
                  "label": {
                    "zh_CN": "最多加购(按加购数量降序)",
                    "en_US": "Most added (descending order of purchase quantity)"
                  },
                  "value": "max_add_to_cart"
                },
                {
                  "label": {
                    "zh_CN": "最多购买(按总销量降序)",
                    "en_US": "Most purchased (descending order of total sales)"
                  },
                  "value": "max_buy"
                }
              ]
            }
          ]
        },
        {
          "value": "current",
          "settings": [
            {
              "type": "card_select",
              "label": {
                "zh_CN": "推荐规则",
                "en_US": "Recommendation rules"
              },
              "default": "late_up",
              "id": "current_rules",
              "option": [
                {
                  "label": {
                    "zh_CN": "最新上架(按最新创建时间降序)",
                    "en_US": "Latest release (in descending order of last created)"
                  },
                  "value": "late_up"
                },
                {
                  "label": {
                    "zh_CN": "最多浏览(按最多浏览降序)",
                    "en_US": "Most viewed (in descending order of most viewed)"
                  },
                  "value": "max_visit"
                },
                {
                  "label": {
                    "zh_CN": "最多加购(按加购数量降序)",
                    "en_US": "Most added (descending order of purchase quantity)"
                  },
                  "value": "max_add_to_cart"
                },
                {
                  "label": {
                    "zh_CN": "最多购买(按总销量降序)",
                    "en_US": "Most purchased (descending order of total sales)"
                  },
                  "value": "max_buy"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "card_input_number",
      "label": {
        "zh_CN": "产品总数量",
        "en_US": "Total quantity of products"
      },
      "max": 1000,
      "min": 1,
      "id": "product_number",
      "default": 20
    }
  ],
  "default": {
    "settings": {
      "is_fill": false,
      "block_title": "You May Also Like",
      "block_detail": "",
      "pc_number": "4",
      "yd_number": "1",
      "range_config": {
        "recommend_range": "single",
        "collection": {
          "id": "",
          "title": ""
        },
        "all_rules": "late_sale",
        "current_rules": "late_up"
      },
      "product_number": 20
    },
    "blocks": []
  }
}
{% endschema %}
